<template>
  <div class="wangEditor">
    <div id="toolbar-container"></div>
    <div id="editor-container"></div>
  </div>
</template>

<script>
// import store from '@/store/index';
import config from '/@/config/index';
const baseUrl = config.baseUrl;
const ossUrl = config.ossUrl;

import '@wangeditor/editor/dist/css/style.css';
import { createEditor, createToolbar, DomEditor, SlateTransforms } from '@wangeditor/editor';

export default {
  name: 'wangEditor',
  props: {
    content: {
      type: String,
      default: () => ''
    },
    attachmentIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      MENU_CONF: {
        uploadImage: {
          // 服务端上传地址
          server: `${baseUrl}/uploadFile`,
          // server: rootPath + '/api/oss/upload',
          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
          fieldName: 'file',
          // 单个文件的最大体积限制，默认为 2M
          maxFileSize: 10 * 1024 * 1024, // 1M
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 1,
          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['image/*'],
          // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
          meta: {
            // token: 'xxx',
            // otherKey: 'yyy'
            // 'fileBusinessType': 'document'
          },
          // 将 meta 拼接到 url 参数中，默认 false
          metaWithUrl: false,
          // 自定义增加 http  header
          headers: {
            // access_token: store.state.layoutStore.currentLoginUser.accessToken || '4e758d850c79cf313100f90ba29a48dc',
            // tenantId: store.state.layoutStore.currentLoginUser.tenantId || 'T0001',
            // funcId: store.state.layoutStore.currentLoginUser.funcId || 'F00601'
          },
          // 上传之前触发
          onBeforeUpload(file) {
            // file 选中的文件，格式如 { key: file }
            return file;

            // 可以 return
            // 1. return file 或者 new 一个 file ，接下来将上传
            // 2. return false ，不上传这个 file
          },
          // 上传进度的回调函数
          onProgress(progress) {
            // progress 是 0-100 的数字
            console.log('progress', progress);
          },
          // 单个文件上传成功之后
          onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res);
          },
          // 单个文件上传失败
          onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res);
          },
          // 上传错误，或者触发 timeout 超时
          onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res);
          },
          // 自定义插入图片
          customInsert: (res, insertFn) => {
            console.log(res);
            // res 即服务端的返回结果
            if (res && res.code === 200) {
              const file = res.data.files[0];
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(ossUrl + file.path, file.fileName, 'href');
              // this.attachmentIds.push({
              //   url: res.datas.filePath,
              //   id: res.datas.id
              // });
              // console.log('ids', this.attachmentIds)
              // this.$emit('update:attachmentIds', this.attachmentIds);
            }
          },
        }
      }
    };
  },
  methods: {
    // 初始化编辑器
    initEditor() {
      const editorConfig = {
        MENU_CONF: this.MENU_CONF
      };
      editorConfig.placeholder = '请输入内容';
      editorConfig.onChange = editor => {
        // 当编辑器选区、内容变化时，即触发
        // console.log('content', editor.children);
        console.log('html', editor.getHtml());
        this.$emit('update:content', editor.getHtml());
      };
      // 创建编辑器
      const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'default' // 或 'simple' 参考下文
      });

      return editor;
    },
    // 初始化工具栏
    initToolbar(editor) {
      const toolbarConfig = {
        excludeKeys: [
          'group-video', // 排除菜单组，写菜单组 key 的值即可
          'insertImage'
        ]
      };
      // 创建工具栏
      const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default' // 或 'simple' 参考下文
      });
      return toolbar;
    },
    // 初始化编辑器内容
    initContent(editor, content) {
      if (content) {
        // 全选并删除
        editor.select([]);
        editor.deleteFragment();
        // 1. 插入 HTML 格式
        // 1.1 第一行改为 paragraph
        SlateTransforms.setNodes(editor, { type: 'paragraph' }, { mode: 'highest' });
        // 1.2 插入内容
        editor.dangerouslyInsertHtml(`${content}`);
      }
    },
    // 修改上传地址
    setUploadUrl(url) {
      this.MENU_CONF.uploadImage.server = url;
    },
    init(content) {
      const editor = this.initEditor();
      const toolbar = this.initToolbar(editor);

      this.initContent(editor, content);

      // 菜单
      // console.log(toolbar.config.toolbarKeys);
    }
  },
  mounted() {
    // this.init();
  }
};
</script>

<style lang="scss" scoped>
.w-e-text-container p {
  line-height: 1;
}

#toolbar-container {
  border: 1px solid #c5c5c5;
  border-bottom: none;
}
#editor-container {
  border: 1px solid #c5c5c5;
}
</style>

<style lang="scss">
.w-e-text-container p {
  line-height: 36px;
}
</style>
